import React, { PureComponent, Fragment } from 'react'
import { LoginWrapper, Logo, LoginMain, Input, Title, Button, MoreSign } from './style'
import { Icon } from 'antd'
import { Link, Redirect } from 'react-router-dom'
import { connect } from 'react-redux'
import { actionCreater } from './store'
class Login extends PureComponent{
    render(){
        const {login}=this.props;
        return(
            
            <Fragment>
                
                {
                    login? <Redirect to= '/'/> :
                    <LoginWrapper>
                  <Link to='/'>
                   <Logo></Logo>
                  </Link> 
                  <LoginMain>
                      <Title>
                        <span className= 'sign-in' >登录</span>
                        <b className= 'title-b'>·</b>
                        <span className= 'sign-up' >注册</span>
                      </Title>
                      <Icon type="user" theme="outlined" className= 'user-icon' />
                      <Input className= 'name' type= 'text' placeholder= '手机号或邮箱' innerRef = {(input) => this.account= input} ></Input>
                      <Icon type="lock" theme="outlined" className= 'lock-icon' />
                      <Input className= 'pwd' type= 'password' placeholder= '密码' innerRef = {(input) => this.passwd= input} />
                      <Input type= 'checkbox' check='checked' className= 'check-box' />
                      <span className= 'remmber-me' >记住我</span>
                      <span className= 'forget-btn' >登录遇到问题?</span>
                      <Button onClick= {()=>this.props.handlelogin(this.account, this.passwd)} >登录</Button>
                      <MoreSign>
                          <h6  >社交帐号登录</h6>
                          <ul>
                            <Icon type="weibo" theme="outlined"  className= 'weibo-link' />
                            <Icon type="wechat" theme="outlined" className= 'wechat-link' />
                            <Icon type="qq" theme="outlined"  className= 'qq-link'/>
                            <span className= 'other'>其它</span>
                          </ul>
                      </MoreSign>
                  </LoginMain>
                  {/* <img className= 'login-img' src= '../../statics/logo.png' /> */}
                </LoginWrapper>
                }
            </Fragment>
        )
    }
}
const mapState = (state) => {
    return{
        login: state.getIn(['login', 'login'])
    }
}
const mapDispatch= (dispatch) => ({
    handlelogin(account, passwd){
       dispatch( actionCreater.getLogin(account, passwd))
    }
})
export default connect( mapState, mapDispatch )(Login);